<template>
  <div>
    <div class="title">
      <h4>{{ zuofa }}</h4>
    </div>
    <div class="d1" v-for="f in data" :key="f.aid">
      <img :src="`/img/${f.smallpicture}`" alt="" />
      <p @click="goDetail(f)">{{ f.title }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Zuofa",
  data() {
    return {
      data: null,
      id: "",
      zuofa: "",
    };
  },
  methods: {
    goDetail(f) {
      this.$router.push({
        name: "zuofaxiangqing",
        params: {
          data: f,
        },
      });
    },
    getData(id) {
      const url = `v1/caipu/alltype/${id}`;
      this.axios.get(url).then((res) => {
        console.log(res.data);
        this.data = res.data.data;
      });
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.zuofa = this.$route.params.zuofa;
    if (this.id) {
      this.getData(this.id);
      window.sessionStorage.setItem("id", this.id);
      window.sessionStorage.setItem("zuofa", this.zuofa);
    } else {
      this.getData(window.sessionStorage.getItem("id"));
      this.zuofa = window.sessionStorage.getItem("zuofa");
    }
  },
  beforeDestroy() {
    console.log("菜谱做法页面被销毁了！");
  },
};
</script>

<style lang="scss" scoped>
</style>
<style scoped>
.title {
  color: #817c74;
  padding-left: 10px;
  font-size: 19px;
}
.title h4 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.d1 {
  width: 95%;
  margin: 0 auto;
  border: 1px solid #f4f1f0;
  display: flex;
  color: #fa7e3e;
}
.d1 img {
  margin-right: 12px;
}
</style>